<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画+animation.css</title>
		<style>
			
		</style>
	</head>
	
	<body>
		<div id="app">
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		
	</script>
		
		
		
		<!-- 
		 Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
		 条件渲染 (使用 v-if)
		 条件展示 (使用 v-show)
		 动态组件
		 组件根节点
		 
		 过渡的类名
		 在进入/离开的过渡中，会有 6 个 class 切换。
		 
		 v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
		 
		 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，
		 在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
		 
		 v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，
		 在过渡/动画完成之后移除。
		 
		 v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
		 
		 v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，
		 在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
		 
		 v-leave-to：2.1.8 版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效
			(与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
		 
		 案例
		 <transition>
		 	<div v-if="show" class="show">show me</div>
		 </transition>
		 .hello .v-enter {
		 	opacity: 0;
		 	background-color: red;
		 }
		 .hello .v-enter-active {
		 	transition: all 3s;
		 	background-color: pink;
		 }
		 .hello .v-enter-to {
		 	opacity: 1;
		 	background-color: green;
		 }
		 
		 .hello .v-leave {
		 	background-color: skyblue;
		 }
		 .hello .v-leave-active {
		 	transition: all 3s;
		 }
		 .hello .v-leave-to {
		 	background-color: #000;
		 	opacity: 0;
		 }
		注意:加上  .hello  是为了 提高 动画样式的优先级 
		 
		 
		 
		 如果是多个transition标签 需要 不同的动画 那么可以给tansition标签添加name
		 <transition name="fade">
		 	<div v-if="show" class="show">show me</div>
		 </transition>
		 
		 样式 就将 前面的 v 替换为 取得name
		 .fade-enter-active,
		 .fade-leave-active {
		 	transition: opacity 3s;
		 }
		 
		 .fade-enter,
		 .fade-leave-to
		 
		 /* .fade-leave-active below version 2.1.8 */
		 	{
		 	opacity: 0;
		 
		 自定义过渡的类名
		 我们可以通过以下 attribute 来自定义过渡类名：
		 enter-class
		 enter-active-class
		 enter-to-class (2.1.8+)
		 leave-class
		 leave-active-class
		 leave-to-class (2.1.8+)
		 
		 案例
		 <transition
			 enter-class='in1'
			 enter-active-class='in2'
			 enter-to-class='in3'
			 leave-class='out1'
			 leave-active-class='out2'
			 leave-to-class='out3'
		 >
		 	<div v-if="show" class="show">show me</div>
		 </transition>
		 样式
		 .in1{
		 	opacity: 0;
		 }
		 .in2{
		 	transition: all 2s;
		 }
		 .in3{
		 	opacity: 1;
		 }
		 .out1{
		 	opacity: 1;
		 }
		 .out2{transition: all 2s;}
		 .out3{
		 	opacity: 0;
		 }
		 
		 vue-transition  配合  Animate.css 使用
		 Animate.css官网 https://animate.style/ 
		 安装
		 npm install animate.css --save
		 再main.js  里面 引用 
		 import 'animate.css';
		 
		 <transition
			name='ani'
		 	enter-active-class='animate__animated animate__backInDown'
		 	leave-active-class='animate__animated animate__backOutDown'
		 	>
		 	<div v-if="show" class="show">show me</div>
		 </transition>
		 //animate__animated 这个是所有的动画通用的名字 
		 //后面的第二个类名 例如 animate__backInDown  是动画效果的名字
		 
		 
		 初始渲染的过渡
		 可以通过 appear attribute 设置节点在初始渲染的过渡
		 <transition appear>
		 </transition>
		 -->
	</body>
</html>